<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-router@3.3.2/dist/vue-router.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/http-vue-loader@1.4.2/src/httpVueLoader.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script>
    <!-- 引入axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js"></script>
    <!-- 引入qs -->
    <script src="https://cdn.jsdelivr.net/npm/qs@6.9.3/dist/qs.js"></script>
    <!-- mock -->
    <script src="https://cdn.jsdelivr.net/npm/mockjs@1.1.0/dist/mock.min.js"></script>
    <!-- 引入自定义样式 -->
    <link rel="stylesheet" href="css/common.css">
    <style>
        .el-header, .el-footer {
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }

        .el-main {
            background-color: #F8F8F8;
            color: #333;
        }

        #app > .el-container {
            padding-bottom: 40px;
            height: 100%;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }
        .nav-item{
            font-size: 12px;
            padding: 20px 10px;
            text-align: center;
            display: block;
        }
        .nav-selected{
            background-color: #FEF8F8;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-container>
            <el-header>欢迎光临网络中心</el-header>
            <el-container>
                <el-aside width="80px">
                    <router-link v-for="(item, index) in channels" :to="item.path" @click.native="nav_select(item)" class="nav-item" v-bind:class="{ 'nav-selected':current_channel == item.path }">
                        {{item.name}}
                    </router-link>
                </el-aside>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>

    <!-- 自定义js -->
    <script src="js/router.js"></script>
    <script src="js/mock.js"></script>
    <script>
        // 4. 创建和挂载根实例。
        // 记得要通过 router 配置参数注入路由，
        // 从而让整个应用都有路由功能
        const app = new Vue({
            router: $util.router,
            data: {
                channels: [
                    {name:'首页', path:'/'},
                    {name:'电影', path:'/channel/dianying'},
                    {name:'电视剧', path:'/channel/dianshiju'}
                    ],
                current_channel: '/'
            },
            computed: {},
            created: function () {
                $util.$http.get('hello.json')
                .then(resp => {
                    console.log(resp)
                })
            },
            methods: {
                nav_select(item){
                    this.current_channel = item.path
                }
            }
        }).$mount('#app')
    </script>
</body>
</html>
